<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录页面</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            background: url(img/bg.jpg) no-repeat center;
            background-size: cover;
            height: 100%;
        }
        
        input {
            outline: none;
            box-sizing: border-box;
        }
        
        .login {
            width: 500px;
            /* height: 400px; */
            background: #fff;
            opacity: .9;
            margin: 100px auto;
            overflow: hidden;
            border-radius: 15px;
            text-align: center;
        }
        
        .form-group:nth-last-child(1) {
            width: 100%;
            height: 30px;
            text-align: center;
        }
        
        .form-group:nth-last-child(1) #send {
            outline: none;
            margin: 0 auto;
            width: 80px;
        }
        
        .form-group:nth-last-child(1) #register {
            outline: none;
            margin: 0 auto;
            width: 80px;
        }
        
        h2 {
            margin: 14px;
        }
        
        .form-horizontal {
            margin-left: 14px;
            text-align: center;
        }
        
        input.form-control {
            width: 300px;
        }
        
        #freeLogin {
            width: 200px;
            margin-left: 5px;
        }
        
        #freeLogin label {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="login">
        <h2>用户登录</h2>
        <div class="form-horizontal">
            <div class="form-group">
                <label for="username" class="col-sm-2 control-label">用户名：</label>
                <div class="col-sm-10">
                    <input type="text" id="username" class="form-control">
                </div>
            </div>

            <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码：</label>
                <div class="col-sm-10">
                    <input type="password" id="password" class="form-control">
                </div>
            </div>

            <div class="form-group" id="freeLogin">
                <label for="" class="col-sm-2 control-label">
                    <input type="checkbox" id="rememberMe" >30天内免登陆
                </label>
            </div>

            <div class="form-group">
                <button class="btn btn-primary" id="send">登陆</button>
                <button class="btn btn-primary" id="register">注册</button>

            </div>
        </div>
    </div>

</body>

</html>
<script src="lib/jquery.min.js"></script>
<script src="lib/common.js"></script>
<script>
    $(window).keydown(function(e) {
        if (e.keyCode == 13) {
            $("#send").click();
        }
    })

    // let address = "http://10.35.170.201:8082";
    $("#register").click(function() {

        location.href = `${address}/register.html`;
    })
    $("#send").click(function() {
        let username = $("#username").val();
        let password = $("#password").val();

        if (username && password) { //这句话是做了非空验证
            $.ajax({
                url: `${address}/login`,
                method: "get",
                data: {
                    username: $("#username").val(),
                    password: $("#password").val()
                },
                success(data) {

                    // if (data === "3") {
                    //     alert("登录失败")
                    // }
                    if (data === "2") {
                        alert("用户名或者密码错误")
                    }
                    // if (data === "1") {
                    //     alert("哈哈哈")
                    // }
                    else {
                        // 记住30天免登陆逻辑
                        //if($("#rememberMe").prop.checked)等价于下边写法，都是将jQuery对象转换为原生JS属性
                        if ($("#rememberMe")[0].checked) { //checked只在原生JS有，所以要将jQuery对象转换为原生JS属性
                            let date = new Date(); //现在时间
                            date.setDate(date.getDate() + 30); //30天后的过期时间
                            document.cookie = `userInfo=${data};expires=${date}`;
                        }
                        sessionStorage.setItem("userInfo", data); //现存session
                        location.href = `${address}/student.html`; //再跳转至学生界面

                    }
                }
            })
        }
    })
</script>